<template>
    <div class="app-container">
      <el-row :gutter="10">
        <!--      产品统计-->
        <el-col :span="8" :xs="24">
          <div class="container">
            <div class="title">产品统计</div>
            <!--          内容-->
            <el-row :gutter="7" class="content">
              <el-col :span="12" v-for="(item, i) in productList" :key="i">
                <div class="text">
                  <div class="text_name">{{ item.productName }}</div>
                  <div class="text_num">{{ item.number }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!--      设备状态统计-->
        <el-col :span="16" :xs="24">
          <div class="container">
            <div class="title">设备状态统计</div>
            <!--          内容-->
            <el-row :gutter="7" class="content">
              <el-col :span="6" v-for="(item, j) in deviceStatusList" :key="j">
                <div class="text">
                  <div class="text_name">{{ item.type }}</div>
                  <div class="text_num">{{ item.number }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!--      卡费统计-->
  <!--      <el-col :span="8" :xs="24">-->
  <!--        <div class="container">-->
  <!--          <div class="title">卡费统计</div>-->
  <!--          &lt;!&ndash;          内容&ndash;&gt;-->
  <!--          <el-row :gutter="7" class="content">-->
  <!--            <el-col :span="12">-->
  <!--              <div class="text">-->
  <!--                <div class="text_name">卡费正常</div>-->
  <!--                <div class="text_num">1</div>-->
  <!--              </div>-->
  <!--            </el-col>-->
  <!--            <el-col :span="12">-->
  <!--              <div class="text">-->
  <!--                <div class="text_name">即将到期</div>-->
  <!--                <div class="text_num">0</div>-->
  <!--              </div>-->
  <!--            </el-col>-->
  <!--            <el-col :span="12">-->
  <!--              <div class="text">-->
  <!--                <div class="text_name">卡费到期</div>-->
  <!--                <div class="text_num">0</div>-->
  <!--              </div>-->
  <!--            </el-col>-->
  <!--          </el-row>-->
  <!--        </div>-->
  <!--      </el-col>-->
      </el-row>
  <!--    内容-->
      <el-row :gutter="20" style="margin-top: 15px; height: calc( 100% - 282px);">
        <el-col :span="18" :xs="24" style="height: 100%;">
          <div style="width: 100%;background: #002127;border-radius: 10px;overflow: hidden;">
  <!--          搜索-->
            <Search
                :search-data="searchData"
                :search-params="queryParams"
                @change="searchParamsUpdate"
                style="display: inline-block;"
            >
            </Search>
  <!--          新增type="primary"-->
            <el-button
                style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;display: inline-block;"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
            >新增</el-button>
            <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
            <!--    表格-->
            <el-table
                :data="tableData"
                style="width: 100%;margin-top: 10px;color: #999;background: #002127;"
                height="495px"
                :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
                :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff' }"
                >
              <el-table-column
                  prop="deviceName"
                  label="设备名称"
                  align="center"
                  sortable
                  v-if="columns[0].visible">
              </el-table-column>
              <el-table-column
                  prop="deviceId"
                  label="设备ID"
                  align="center"
                  v-if="columns[1].visible">
              </el-table-column>
              <el-table-column
                  prop="deviceStatus"
                  label="设备状态"
                  align="center"
                  v-if="columns[2].visible">
              </el-table-column>
              <el-table-column
                  prop="time"
                  label="注册时间"
                  align="center"
                  show-overflow-tooltip
                  :formatter="dateFormat"
                  v-if="columns[3].visible">
              </el-table-column>
              <el-table-column
                  prop="tel"
                  label="SIM卡号"
                  align="center"
                  show-overflow-tooltip
                  v-if="columns[4].visible">
              </el-table-column>
              <el-table-column
                  prop="simTime"
                  label="卡到期时间"
                  align="center"
                  show-overflow-tooltip
                  v-if="columns[5].visible">
              </el-table-column>
              <el-table-column
                  prop="serviceTime"
                  label="服务到期时间"
                  align="center"
                  v-if="columns[6].visible">
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="设备状态值"
                  align="center"
                  v-if="columns[7].visible">
              </el-table-column>
              <el-table-column label="操作" align="center" width="230">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                      icon="el-icon-edit"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                      size="mini"
                      style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                      @click="handsEdit(scope.$index, scope.row)">远程同步配置</el-button>
  <!--                <el-button-->
  <!--                    size="mini"-->
  <!--                    type="danger"-->
  <!--                    plain-->
  <!--                    icon="el-icon-delete"-->
  <!--                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>
            <!--    分页-->
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
            />
          </div>
        </el-col>
  <!--       图表-->
        <el-col :span="6" :xs="24" style="height:664px">
          <div class="charts" style="margin-bottom: 10px;">
            <div class="charts_title">设备状态统计</div>
            <div id="main" style="width: 100%;height: 280px;"></div>
          </div>
          <div class="charts">
            <div class="charts_title">设备在线率</div>
            <div id="mains" style="width: 100%;height: 280px;"></div>
          </div>
        </el-col>
      </el-row>
  <!--    设备新增-->
      <div class="add">
        <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备id" prop="deviceId">
                  <el-input v-model="form.deviceId" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备名称" prop="deviceName">
                  <el-input v-model="form.deviceName" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="通道序列号" prop="channelNo">
                  <el-checkbox-group v-model="form.channelNo">
                    <el-checkbox label="1"></el-checkbox>
                    <el-checkbox label="2"></el-checkbox>
                    <el-checkbox label="3"></el-checkbox>
                    <el-checkbox label="4"></el-checkbox>
                    <el-checkbox label="5"></el-checkbox>
                    <el-checkbox label="6"></el-checkbox>
                    <el-checkbox label="7"></el-checkbox>
                    <el-checkbox label="8"></el-checkbox>
                  </el-checkbox-group>
  <!--                <el-input v-model="form.channelNo" placeholder="请输入" />-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备地址" prop="addr">
                  <el-input v-model="form.addr" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="经度" prop="latitude">
                  <el-input v-model="form.latitude" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="纬度" prop="longitude">
                  <el-input v-model="form.longitude" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="	sim卡号" prop="tel">
                  <el-input v-model="form.tel" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="卡费到期时间" prop="simTime">
                  <el-date-picker
                      v-model="form.simTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="submitForm" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { saveDevice, getAllDevice, getsyncUpdate, productCount, deviceTypeCount, deviceCount } from '@/api/dev/index'
  import Search from '@/components/PageSearch'
  import RightToolbar from '@/components/RightToolbar'
  import Pagination from "@/components/Pagination/index";
  import axios from "axios";
  import moment from 'moment'
  const defaultForm = {
    deviceId: '',
    deviceName: '',
    channelNo: [],
    addr: '',
    latitude: '',
    longitude: '',
    simTime: '',
    tel: ''
  }
  export default {
    name: "DevList",
    components: { Search, RightToolbar, Pagination },
    data() {
      return {
        // 搜索
        searchData: [
          {
            type: 'input',
            label: '设备名称',
            prop: 'deviceName',
            placeholder: '请输入设备名称筛选'
          },
          {
            type: 'input',
            label: '设备id',
            prop: 'deviceId',
            placeholder: '请输入设备id筛选'
          }
        ],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          page: 1,
          limit: 20,
          deviceId: '',
          deviceName: ''
        },
        // 显示搜索条件
        showSearch: true,
        // 列信息
        columns: [
          { key: 0, label: `设备名称`, visible: true },
          { key: 1, label: `设备ID`, visible: true },
          { key: 2, label: `设备状态`, visible: true },
          { key: 3, label: `注册时间`, visible: true },
          { key: 4, label: `SIM卡号`, visible: true },
          { key: 5, label: `卡到期时间`, visible: true },
          { key: 6, label: `服务到期时间`, visible: true },
          { key: 7, label: `设备状态值`, visible: true }
        ],
        // 表格
        tableData: [],
        // 弹出层标题
        title: "新增设备",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: Object.assign({}, defaultForm),
        // 表单校验id
        rules: {
          deviceId: [
            { required: true, message: '请输入设备id', trigger: 'blur' }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          deviceName: [
            { required: true, message: '请输入设备名称', trigger: 'blur' }
          ]
        },
        // 产品统计
        productList: [],
        // 设备状态统计
        deviceStatusList: [],
      }
    },
    props: {},
    watch: {},
    created() {
      this.getList()
      this.productStat()
      this.deviceStatus()
    },
    mounted() {
      this.chartA()
      this.chartB()
    },
    methods: {
      // 时间格式化
      dateFormat(row, column) {
        const date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      // 分页查询
      getList() {
        getAllDevice(this.queryParams).then((res) => {
          console.log(res)
          this.total = res.dataCounts
          this.tableData = res.data || []
          res.data.map(item => {
            if (item.deviceStatus === 1) {
              item.deviceStatus = '正常'
            } else if (item.deviceStatus === 2) {
              item.deviceStatus = '拆机'
            } else if (item.deviceStatus === 3) {
              item.deviceStatus = '水浸'
            }
            if (item.hist === 0) {
              item.hist = '不保存'
            } else if (item.hist === 1) {
              item.hist = '预留'
            } else if (item.hist === 2) {
              item.hist = '正常历史数据保存'
            }
            if (item.status === 0) {
              item.status = '未激活'
            } else if (item.status === 1) {
              item.status = '已激活'
            }
          })
        }).catch((err) => {
          console.log(err)
          // this.$message.error(err.errorMsg)
        })
      },
      // 新的搜索内容
      searchParamsUpdate(){
        this.getList()
      },
      // 新增
      handleAdd(){
        this.open = true
      },
      // 取消
      dialogCancel() {
        this.open = false
        this.form = Object.assign({}, defaultForm)
      },
      // 新增（确定）
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const data = {
              deviceId: this.form.deviceId,
              deviceName: this.form.deviceName,
              channelNo: this.form.channelNo.join(","),
              addr: this.form.addr,
              latitude: this.form.latitude,
              longitude: this.form.longitude,
              simTime: this.form.simTime,
              tel: this.form.tel
            }
            saveDevice(data).then((res) => {
              this.$message.success('添加成功！')
              this.dialogCancel()
              this.getList()
            }).catch((err) => {
              this.$message.error(err.errorMsg)
            })
          } else {
            this.$message.warning('请填写相关字段内容')
            return false
          }
        })
      },
      // 编辑
      handleEdit(index,row) {
        console.log(index,row)
        this.$router.push({
          path: '/DevEdit',
          query: {
            Data: row.deviceId,
            Datas: row.id,
          }
        })
      },
      //远程同步设备配置信息
      handsEdit(index,row) {
        console.log(index,row)
        const data = row.deviceId
        getsyncUpdate(data).then((res) => {
          console.log(res)
          this.$message.success('远程同步设备配置信息成功！')
        }).catch((err) => {
          console.log(err)
          this.$message.error(err.errorMsg)
        })
      },
      // 删除
      // handleDelete(row) {},
      // 产品统计
      productStat() {
        productCount().then((res) => {
          console.log(res)
          this.productList = res.data
        }).catch((err) => {
          console.log(err)
        })
      },
      // 设备状态统计
      deviceStatus(){
        deviceTypeCount().then((res) => {
          console.log(res)
          this.deviceStatusList = res.data
        }).catch((err) => {
          console.log(err)
        })
      },
      //  设备状态统计
      chartA() {
        const myChart = this.$echarts.init(document.getElementById('main'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'#002127',
          // title: {
          //   text: '设备状态统计',
          //   textStyle:{
          //     color: '#000',
          //     fontSize: 14
          //   }
          // },
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#006675"
              }
            }
          },
          // 折线颜色
          color: ['#006675'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '13%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/10/01', '2002/10/01', '2003/10/01', '2004/10/01', '2005/10/01', '2006/10/01', '2007/10/01', '2008/10/01', '2009/10/01'],
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // x轴字体设置
            axisLabel: {
              // interval: 0,
              rotate: 60, //倾斜角度
              color: '#ffffff',
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: '#999999',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            // name: '(mA)',
            type: 'value',
            // min: 0,
            // max: 250,
            // y轴字体颜色
            axisLabel: {
              color: '#ffffff',
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#999999',
            //   }
            // },
            axisTick: {
              show: true
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999999',
                type:'dashed',
              }
            }
          }
          ],
          series: [
            {
              name: '在线数',
              type: 'line',
              symbolSize: 4,
              // lineStyle: {
              //   normal: {
              //     width: 2,
              //     shadowOffsetY: 4,
              //     shadowBlur: 4,
              //     shadowColor: 'rgba(0,0,0,.08)'
              //
              //   },
              // },
              smooth: true,
              data: ['40', '80', '50', '120', '70', '190', '80', '120', '40'],
            }
          ]
        });
        // myChart.setOption(option);
        myChart.resize(); //重绘,动态获取options时不会出现渲染异常
        deviceCount().then((res) => {
          console.log(res)
          const time = res.data.time
          const number1 = res.data.number1
          myChart.setOption({
            backgroundColor:'#002127',
            // title: {
            //   text: '设备状态统计',
            //   textStyle:{
            //     color: '#000',
            //     fontSize: 14
            //   }
            // },
            // 指示线
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: "#00B8B8"
                }
              }
            },
            // 折线颜色
            color: ['#00B8B8'],
            // 图表距离容器距离
            grid: {
              left: '2%',
              right: '2%',
              top: '5%',
              bottom: '8%',
              containLabel: true
            },
            xAxis: [{
              show: true,
              type: 'category',
              // 隐藏横向网格线
              splitLine: {
                show: false
              },
              data: time,
              // 横坐标刻度线
              axisTick: {
                show: false
              },
              // x轴字体设置
              axisLabel: {
                // interval: 0,
                rotate: 0, //倾斜角度
                color: '#ffffff',
              },
              // x坐标轴
              axisLine: {
                lineStyle: {
                  color: '#999999',
                }
              },
              // y轴与坐标轴线对齐
              boundaryGap: true,
            }],
            yAxis: [{
              // name: '(mA)',
              type: 'value',
              // min: 0,
              // max: 250,
              // y轴字体颜色
              axisLabel: {
                color: '#ffffff',
              },
              axisLine: {
                show: false
                // lineStyle: {
                //   color: '#999999',
                // }
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#999999',
                  type: 'dashed',
                }
              }
            }
            ],
            series: [
              {
                name: '在线数',
                type: 'line',
                symbolSize: 4,
                // lineStyle: {
                //   normal: {
                //     width: 2,
                //     shadowOffsetY: 4,
                //     shadowBlur: 4,
                //     shadowColor: '#6bd527'
                //   },
                // },
                smooth: true,
                data: number1,
              }
            ]
          });
          myChart.resize();
        }).catch((err) => {
          console.log(err)
        })
      },
      //  设备状态统计
      chartB() {
        const myChart = this.$echarts.init(document.getElementById('mains'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'#002127',
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#006675"
              }
            }
          },
          // 折线颜色
          color: ['#006675'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '13%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/10/01', '2002/10/01', '2003/10/01', '2004/10/01', '2005/10/01', '2006/10/01', '2007/10/01', '2008/10/01', '2009/10/01'],
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // x轴字体设置
            axisLabel: {
              // interval: 0,
              rotate: 60, //倾斜角度
              color: '#ffffff',
            },
            // x坐标轴
            axisLine: {
              lineStyle: {
                color: '#999999',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              color: '#ffffff',
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#999999',
                type:'dashed',
              }
            }
          }
          ],
          series: [
            {
              name: '在线数',
              type: 'line',
              symbolSize: 4,
              smooth: true,
              data: ['40', '80', '50', '120', '70', '190', '80', '120', '40'],
            }
          ]
        });
        myChart.resize();
        deviceCount().then((res) => {
          console.log(res)
          const time = res.data.time
          const number2 = res.data.number2
          myChart.setOption({
            backgroundColor:'#002127',
            // 指示线
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: "#00B8B8"
                }
              }
            },
            // 折线颜色
            color: ['#00B8B8'],
            // 图表距离容器距离
            grid: {
              left: '2%',
              right: '2%',
              top: '5%',
              bottom: '8%',
              containLabel: true
            },
            xAxis: [{
              show: true,
              type: 'category',
              // 隐藏横向网格线
              splitLine: {
                show: false
              },
              data: time,
              // 横坐标刻度线
              axisTick: {
                show: false
              },
              // x轴字体设置
              axisLabel: {
                // interval: 0,
                rotate: 0, //倾斜角度
                color: '#ffffff',
              },
              // x坐标轴
              axisLine: {
                lineStyle: {
                  color: '#999999',
                }
              },
              // y轴与坐标轴线对齐
              boundaryGap: true,
            }],
            yAxis: [{
              type: 'value',
              // y轴字体颜色
              axisLabel: {
                color: '#ffffff',
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#999999',
                  type: 'dashed',
                }
              }
            }
            ],
            series: [
              {
                name: '在线率',
                type: 'line',
                symbolSize: 4,
                smooth: true,
                data: number2,
              }
            ]
          });
          myChart.resize();
        }).catch((err) => {
          console.log(err)
        })
      },
  
    }
  }
  </script>
  
  <style lang='less' scoped>
  .app-container {
    width: 100%;
    min-height: 100%;
    // padding: 15px;s
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      background: #002127;
      border-radius: 10px;
      .title {
        width: 100%;
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        // border-bottom: 1px solid #999999;
        color: #ffffff;
        font-size: 14px;
      }
      .content {
        width: 100%;
        height: 200px;
        padding: 10px 10px 10px 15px;
        .text {
          background: url(@/assets/image/1.png) no-repeat;
          background-size:100% 100%;
          padding: 10px 15px;
          margin-bottom: 10px;
          border-radius: 10px;
          .text_name {
            font-size: 12px;
            color: #ffffff;
            margin-bottom: 10px;
            //display: flex;
            //justify-content: space-between;
            //align-items: center;
          }
          .text_num {
            font-size: 30px;
            color: #ffffff;
            font-style: normal;
            font-weight: 300;
          }
        }
      }
    }
    // 折线图
    .charts {
      width: 100%;
      background: #002127;
      border-radius: 10px;
      height: 49%;
      overflow: hidden;
      .charts_title {
        width: 100%;
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        // border-bottom: 1px solid #999999;
        color: #ffffff;
        font-size: 14px;
      }
    }
    // 增加弹框
    .add {
      ::v-deep(.el-dialog){
        background: rgba(4,28,33,0.8);
        box-shadow: 0px 0px 20px 0px rgba(0,231,231,0.5);
        border-radius: 20px;
        border: 1px solid rgba(0,231,231,0.698);
        //标题颜色
        .el-dialog__title {
          color: white;
        }
        // 输入框label字体颜色
        .el-form-item__label {
          color: white;
        }
        // 输入框
        .el-input__inner {
          background: #041C21;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid rgba(0,231,231,0.502);
          color: white;
        }
        // 错误规则提示
        .el-form-item__label:before {
          color: #00E7E7;
        }
        // 必填星号
        .el-form-item__error {
          color: #00E7E7;
        }
      }
    }
    // 多选框
    ::v-deep .el-checkbox {
      color: #FFFFFF;
    }
    ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #006675;
      border-color: #006675;
    }
    ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #ffffff;
    }
  }
  
  
  // 表格设置鼠标经过时背景颜色
  ::v-deep.el-table tbody tr:hover>td{
    background-color: #02565c !important;
  }
  //表格改变每行底边框颜色
  ::v-deep.el-table  td, .el-table th.is-leaf  {
    border-bottom:  1px solid rgba(0,231,231,0.302)!important;
  }
  /*table边框颜色*/
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: #002127;
  }
  
  </style>
  